<gm:page title="Video" authenticate="false">

  
    <link href="../../css/gsearch.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
      body *, table *,
      body {
        font-family: Arial,Sans-serif;
        font-size: 13px;
      }

      h1 {
        font-size : 16px;
        font-weight : bold;
        background-color : rgb(230, 248, 221);
        border-top : 1px solid rgb(128, 198, 90);
        text-align : center;
        margin-bottom : 10px;
        padding-bottom : 4px;
        color : #676767;
      }

      h1 .tagline,
      h1 a .tagline {
        font-size : 13px;
        font-weight : normal;
        color : #676767;
        text-decoration : underline;
        cursor : pointer;
      }

      td {
        vertical-align : top;
      }

      td.map {
        width: 600px;
      }

      td.search-control {
        padding-left : 25px;
        width :  350px;
      }

      #mapDiv {
        border : 1px solid #979797;
        width : 100%;
        height : 400px;
      }

      .gsc-keeper {
        display : none;
      }

      .gsc-localResult .gsc-keeper {
        display : block;
      }


    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAR5gtrmyCGQrJBr6A0k4RiBRyi2vQfXorhCVrt-VgFIaFCI-A0xSYVUv1kVeW6aIu_-mayExQaZ90pg&id=007907538933202583433:4s0l7ubey6m" type="text/javascript"/></script>   
   <script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAR5gtrmyCGQrJBr6A0k4RiBRyi2vQfXorhCVrt-VgFIaFCI-A0xSYVUv1kVeW6aIu_-mayExQaZ90pg&id=007907538933202583433:4s0l7ubey6m"/></script>
   <script type="text/javascript">
    //<![CDATA[

    var app;
    function OnLoad() {
      app = new App();
    }

    function App() {

      this.myMap = null;
      this.markerList = new Array();

      // create a map
      this.myMap = new GMap2(document.getElementById("mapDiv"));
      this.myMap.addControl(new GSmallMapControl());
      this.myMap.setCenter(new GLatLng(51.4632,-0.3006), 14);

      // Create a search control
      var searchControl = new GSearchControl();

      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      var options = new GsearcherOptions();
      options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
      searchControl.addSearcher(localSearch, options);
      searchControl.addSearcher(new GvideoSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint(this.myMap);

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // tell the search control to call be on start/stop
      searchControl.setSearchCompleteCallback(this, App.prototype.OnSearchComplete);
      searchControl.setSearchStartingCallback(this, App.prototype.OnSearchStarting);
      searchControl.setOnKeepCallback(this, App.prototype.OnKeep, "view on map");

      // execute an inital search
      searchControl.execute("Singing waitress");
    }

    App.prototype.OnSearchComplete = function(sc, searcher) {

      // if we have local search results, put them on the map
      if ( searcher.results && searcher.results.length > 0) {
        for (var i = 0; i < searcher.results.length; i++) {
          var result = searcher.results[i];

          // if this is a local search result, then proceed...
          if (result.GsearchResultClass == GlocalSearch.RESULT_CLASS ) {
            var markerObject = new Object();
            markerObject.result = result;
            markerObject.latLng = new GLatLng(parseFloat(result.lat), parseFloat(result.lng));
            markerObject.gmarker = new GMarker(markerObject.latLng);
            var clickHandler = method_closure(this, App.prototype.OnMarkerClick, [markerObject]);
            GEvent.bind(markerObject.gmarker, "click", this, clickHandler);
            this.markerList.push(markerObject);
            this.myMap.addOverlay(markerObject.gmarker);
            result.__markerObject__ = markerObject;
          }
        }
        this.OnMarkerClick(this.markerList[0]);
      }
    }

    App.prototype.OnSearchStarting = function(sc, searcher, query) {
      // close the info window and clear markers
      this.myMap.closeInfoWindow();
      for (var i=0; i < this.markerList.length; i++) {
        var markerObject = this.markerList[i];
        this.myMap.removeOverlay(markerObject.gmarker);
      }
      this.markerList = new Array();
    }

    App.prototype.OnKeep = function(result) {
      if (result.__markerObject__) {
        markerObject = result.__markerObject__;
        this.OnMarkerClick(markerObject);
      }
    }

    App.prototype.OnMarkerClick = function(markerObject) {
      this.myMap.closeInfoWindow();
      var htmlNode = markerObject.result.html.cloneNode(true);
      markerObject.gmarker.openInfoWindow(htmlNode);
    }


    function method_closure(object, method, opt_argArray) {
      return function() {
        return method.apply(object, opt_argArray);
      }
    }

    GSearch.setOnLoadCallback(OnLoad);
    //]]>
    </script>
  
  <body>
      <table>
      <td class="map">
        <div id="mapDiv">Loading...</div>
      </td>
      <td class="search-control">
        <div id="searchcontrol">Loading...</div>
      </td>
    </table>
  </body>


</gm:page>